<template>
  
  <div class="kg-head-he"></div>
<header class="kg-head reg-top">
	<div class="dqxz" @click="$router.go(-1)"><i class="micon">&#xe61e;</i></div>
	<div class="search_box show-cansu">
		我的资料
	</div>
</header>
<!---->
<div class="kg-center">
<!----> 
<a-form
	:form="user"
	@finish="onFinish"
>
	<div class="kg-ksbox mb25">
		<div class="title">
		  <div class="title_a">基础信息</div>
		</div>
		
		<div class="kg-ksxqbox">
			<div class="kg-ksxq-list height-auto align-center">
				<div class="kg-ksxq-lista"><span class="red">*</span> 证件照</div>
				<div class="xy-ksxq-listb" >
						<a-upload
							name="avatar"
							list-type="picture-card"
							class="avatar-uploader"
							:capture="null"
							action="/upload/image"
							:show-upload-list="false"
							:customRequest="onUpload"
						>
						<div class="xy-ksxq-listb-tx" v-if="user.avatar_url"><img  :src="user.avatar_url" alt="avatar" /></div>
						<div v-else >
							<loading-outlined v-if="loading"></loading-outlined>
							<plus-outlined v-else></plus-outlined>
							<div class="ant-upload-text">上传</div>
						</div>
						</a-upload>
					<i class="micon">&#xe65f;</i>
				</div>
				<div class="shuoming">两寸电子证件照，苹果用户请在电脑端口上传</div>
			</div>
			<div class="kg-ksxq-list">
				<div class="kg-ksxq-lista"><span class="red">*</span> 考生姓名</div>
				<div class="kg-ksxq-listb"><input class="input-a" type="text" v-model="user.nick_name" placeholder="请输入" /></div>
			</div>
			<div class="kg-ksxq-list">
				<div class="kg-ksxq-lista"><span class="red">*</span> 考点选择</div>
				<div class="kg-ksxq-listb">
					<a-select v-model:value="user.address_id"
						style="width: 100%"
						placeholder="请选择考试地点"
						:options = addrList
						:fieldNames = fieldNames
						@change = "addrChange"
					></a-select>
				</div>
			</div>
			<div class="kg-ksxq-list" v-if="user.grade_code">
				<div class="kg-ksxq-lista">考级卡号</div>
				<div class="kg-ksxq-listb"><input class="input-a" type="text" disabled :value="user.grade_code" placeholder="请输入" /></div>
			</div>
			<div class="kg-ksxq-list">
				<div class="kg-ksxq-lista"><span class="red">*</span> 性别</div>
				<div class="xy-ksxq-select">
					<select v-model="user.gender">
						<option value="">请选择</option>
						<option value="男" >男</option>
						<option value="女" >女</option>
					</select>
				</div>
			</div>
			<div class="kg-ksxq-list">
				<div class="kg-ksxq-lista"><span class="red">*</span> 出生年月</div>
				<div class="kg-ksxq-listb">
					<!-- <input class="input-a w95" type="date" placeholder="请输入" v-model="user.birthday" /> -->
					<a-date-picker class="input-a w95"  v-model:value="user.birthday" valueFormat="YYYY-MM-DD" format="YYYY-MM-DD" :locale="locale" />
				</div>
			</div>
			<div class="kg-ksxq-list">
				<div class="kg-ksxq-lista"><span class="red">*</span> 证件号</div>
				<div class="kg-ksxq-listb"><input class="input-a" type="text" placeholder="请输入" v-model="user.IDcard" /></div>
			</div>
			<div class="kg-ksxq-list">
				<div class="kg-ksxq-lista"><span class="red">*</span> 国籍</div>
				<div class="kg-ksxq-listb"><input class="input-a" type="text" placeholder="请输入" v-model="user.country" /></div>
			</div>
			<div class="kg-ksxq-list">
				<div class="kg-ksxq-lista"><span class="red">*</span> 民族</div>
				<div class="kg-ksxq-listb"><input class="input-a" type="text" placeholder="请输入" v-model="user.nation" /></div>
			</div>
		</div>
	</div>
	<!---->
	<div class="kg-ksbox mb25">
		<div class="title">
		  <div class="title_a">其它信息</div>
		</div>
		
		<div class="kg-ksxqbox">
			<div class="kg-ksxq-list">
				<div class="kg-ksxq-lista"><span class="red">*</span> 联系人</div>
				<div class="kg-ksxq-listb"><input class="input-a" type="text"  v-model="user.parent_name" placeholder="请输入" /></div>
			</div>
			<div class="kg-ksxq-list">
				<div class="kg-ksxq-lista"><span class="red">*</span> 联系电话</div>
				<div class="kg-ksxq-listb"><input class="input-a" type="number"  v-model="user.mobile" placeholder="请输入" /></div>
			</div>
			<div class="kg-ksxq-list">
				<div class="kg-ksxq-lista">住宅电话</div>
				<div class="kg-ksxq-listb"><input class="input-a" type="text"  v-model="user.phone" placeholder="请输入" /></div>
			</div>
			<div class="kg-ksxq-list">
				<div class="kg-ksxq-lista"><span class="red">*</span> 收件地址</div>
				<div class="kg-ksxq-listb"><input class="input-a" type="text"  v-model="user.home_address" placeholder="请输入" /></div>
			</div>
			<div class="kg-ksxq-list">
				<div class="kg-ksxq-lista">所学专业</div>
				<div class="kg-ksxq-listb">
					<a-cascader 
						style="width: 100%"
						:options="majorList"
						:fieldNames = "majorNames"
						v-model:value = " majors"
						placeholder="请选择专业"
						@change = "majorChange"
						/>
				</div>
			</div>
		</div>
	</div>
	<!---->
	
	<!---->

	
	<button class="but-a mt50" @click="onFinish" type="primary" html-type="submit">确定保存</button>
</a-form>   	
</div>
</template>

<script>
import { message } from 'ant-design-vue';
import {detail,edit} from '@/api/user/index'
import {majorTree} from '@/api/major/index'
import {addrList} from "@/api/address/index";
import * as UploadApi from '@/api/upload'
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import "dayjs/locale/zh-cn"
import { useRouter } from 'vue-router';
import { toRaw,defineComponent, reactive } from 'vue';
export default defineComponent({
  name: 'Profile',
//   setup(){
// 	const router = useRouter()
//   },
  data(){
	return{
      isLoading: false,// 正在加载
	  router:useRouter(),
	  user:{},
	  locale,
	  fileList:[],
      loading:{value:false},
	  uploadUrl: UploadApi.image,
	  majorList:[],
	  majorNames:{ label: 'name', value: 'name' } ,
	  majors:undefined,
	  addrList:[],
	  fieldNames:{ label: 'title', value: 'address_id' } ,
	  
	}
  },
  created () {
    // 初始化页面
    this.init()
  },
  methods: {
	// 初始化页面
    init () {
    	this.getData()
    },
    getData() {
		addrList().then(res=>{
			this.addrList = res.data.addressList;
		})
		majorTree().then(res=>{
			this.majorList = res.data.majorList;
		})
		detail().then((res)=>{
			this.user = res.data.userInfo;
			this.user.address_id = this.user.address_id!=0?this.user.address_id:undefined;
			this.majors=this.user.major_first?[ this.user.major_first , this.user.major_second ]:[]
			
		})
    },
	changeDate(value){
		
		this.user.birthday = value
		console.log(this.user.birthday)
	},
	onFinish(values){
		
		edit(this.user).then((res)=>{
			this.getData()
			message.success(res.message, 1.5)
			setTimeout(() => {
				this.router.push('/mine');
			}, 1000)
		})
		
	},
	// 事件: 自定义上传
    onUpload (info) {
      this.isLoading = true;
      // 构建上传参数
      const formData = new FormData();
      formData.append('file', info.file)
      // 开始上传
      this.uploadUrl(formData)
        .then((values) => {
			this.isLoading = false;
			message.success(values.message, 1.5)
			this.user.avatar_id = values.data.fileInfo.file_id;
			this.user.avatar_url = values.data.fileInfo.external_url;
        })
    },
	
	majorChange(values,option){
		if(values!=undefined){
			this.user.major_first = values[0]
			this.user.major_second = values[1]
		}

	},
  }
})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
::v-deep .ant-upload.ant-upload-select-picture-card{background: none;}
::v-deep .ant-upload-picture-card-wrapper{width: auto;}
::v-deep .ant-select:not(.ant-select-customize-input) .ant-select-selector{border: none; background:none;}
::v-deep .ant-picker-focused{border: none; box-shadow: none;}
::v-deep .ant-picker{border: none;}
::v-deep .ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector{border: none; box-shadow: none;}
.xy-ksxq-listb-tx, .xy-ksxq-listb-tx img{border-radius: 0; height: auto;}
.kg-ksxq-lista{ width:2.2rem;}
.kg-ksxq-list, .kg-ksxq-list-video{flex-wrap: wrap;}
.shuoming{text-align: center; width: 100%;}
</style>
